<template>
    <div ref="wrapper">
        <slot :data="data" :pagination="pagination" :loading="loading" :handleTableChange="handleTableChange" :scroll="scroll"></slot>
    </div>
</template>

<script>
  import {prefix} from '../config';
  const toLine = (name) => {
    return name.replace(/([A-Z])/g,"_$1").toLowerCase();
  };
  export default {
    name: `${prefix}RemoteTableWrapper`,
    props: {
      dataFun: Function,
      params: {
        type: Object,
        default () {
          return {};
        }
      }
    },
    data () {
      return {
        data: [],
        pagination: {
          total: 0,
          defaultCurrent: 1,
          defaultPageSize: 20,
          pageSizeOptions:['20','30','50','100','200'],
          showSizeChanger: true,
          showQuickJumper: true,
          showTotal: total => `共 ${total} 条记录`
        },
        scroll: {},
        pageSize: 20,
        currentPage: 1,
        loading: false
      };
    },
    created () {
      this.reload();
    },
    methods: {
      setScroll () {
        // this.scroll.y = document.body.clientHeight - this.$refs['wrapper'].offsetTop;
      },
      handleTableChange (pagination, filters, sorter) {
        const pager = {...this.pagination};
        pager.current = pagination.current;
        this.pagination = pager;
        let descs = [];
        let ascs = [];
        if (sorter && sorter.order === 'ascend') {
          ascs.push(toLine(sorter.field));
        }
        if (sorter && sorter.order === 'descend') {
          descs.push(toLine(sorter.field));
        }

        if (pagination.current !== this.currentPage) {
          this.currentPage = pagination.current;
        } else {
          this.currentPage = 1;
        }
        this.pageSize = pagination.pageSize;
        let params = {
          size: this.pageSize,
          current: this.currentPage,
          descs: descs.join(','),
          ascs: ascs.join(','),
          ...filters,
          ...this.params
        };
        this.getData(params);
      },
      getData (params) {
        this.loading = true;
        this.dataFun(params).then(ret => {
          let data = ret.data;
          const pagination = { ...this.pagination };
          pagination.total = Number(data.total);
          pagination.current = Number(data.current);
          this.loading = false;
          this.data = data.records;
          this.pagination = pagination;
          this.$emit('afterLoad', ret);
        });
      },
      reloadPage (params = {}) {
        this.getData({
          size: this.pageSize,
          current: this.pagination.current,
          ...this.params,
          ...params
        });
      },
      reload (params = {}) {
        this.getData({
          size: this.pageSize,
          current: 1,
          ...this.params,
          ...params
        });
      }
    },
    mounted () {
      this.setScroll();
      window.onresize = () => {
        setTimeout(() => {
          this.setScroll();
        }, 500);
      };
    }
  };
</script>

<style scoped>

</style>